<template>
  <div class="index">
    <!-- 头部 -->
    <div>
      <van-nav-bar title="错题" left-text="返回" left-arrow @click-left="onClickLeft" class="NavBar" />
    </div>
    <examination
      :single="single"
      :selection="selection"
      :judge="judge"
      :operation="operation"
      :single_keys="JSON.stringify(single_key)"
      :selection_keys="JSON.stringify(selection_key)"
      :judge_keys="JSON.stringify(judge_key)"
      :disabled="disfalgs"
      :single_right_keys="single_right_key"
      :selection_right_keys="selection_right_key"
      :judge_right_keys="judge_right_key"
      ref="mychild"
    ></examination>

    <!-- 选题 -->
    <div>
      <van-button type="primary" @click="showPopup" class="xuanti"> 题号</van-button>
      <van-popup v-model="show" position="bottom" class="xuanti1" closeable>
        <van-divider class="xuantiP">单选题</van-divider>
        <!-- 循环 判断是否有值 点击可以跳转:class="index1 == issicolor[index1] ? 'blue' : 'red'" -->
        <div class="ocolor">
          <div v-for="sing in single.length" :key="sing.id" @click="singl(sing - 1, sing)" :class="sing == issicolor[sing] ? 'blue' : 'red'">
            {{ sing }}
          </div>
        </div>

        <van-divider class="xuantiP">多选题</van-divider>
        <div class="ocolor">
          <div v-for="sele in selection.length" :key="sele.id" @click="selec(sele - 1)" :class="sele == issecolor[sele] ? 'blue' : 'red'">
            {{ sele }}
          </div>
        </div>

        <van-divider class="xuantiP">判断题</van-divider>
        <div class="ocolor">
          <div v-for="judg in judge.length" :key="judg.id" @click="judgs(judg - 1)" :class="judg == isjucolor[judg] ? 'blue' : 'red'">
            {{ judg }}
          </div>
        </div>
        <van-divider class="xuantiP">操作题</van-divider>
        <div class="ocolor">
          <div v-for="oper in operation.length" :key="oper.id" @click="opers(oper - 1)" :class="oper == isopcolor[oper] ? 'blue' : 'red'">
            {{ oper }}
          </div>
        </div>
      </van-popup>
    </div>
    <van-button type="primary" @click="upItem" class="upItem">上一题</van-button>
    <van-button type="primary" @click="nexItem" class="nexItem">下一题</van-button>
  </div>
</template>

<script>
import axios from 'axios'
import { CountDown } from 'vant'
import { NavBar } from 'vant'
import { Button } from 'vant'
import { Toast } from 'vant'
import { Dialog } from 'vant'
import { Popup } from 'vant'
import { Progress } from 'vant'
import examination from '../components/examination'
export default {
  components: { examination },
  comments: {
    examination
  },
  name: 'ExamIdex',
  data() {
    return {
      disfalgs: true,
      // 判断选题
      issicolor: [],
      issecolor: [],
      isjucolor: [],
      isopcolor: [],
      // 底部弹出
      show: false,
      // 题数
      itemS: 0,
      //总题数
      cont: 0,
      currentPage: 1,
      // 题目
      single: [{}],
      selection: [{}],
      judge: [{}],
      operation: [{}],
      // 用户选择的答案
      single_key: [],
      selection_key: [],
      judge_key: [],
      operation_key: [],
      // 转换后的多选
      selection_key2: [],
      // 所有题目
      dataList: [{}],
      selection_sroce: [],
      // 参考答案
      single_right_key: [],
      selection_right_key: [],
      judge_right_key: []
    }
  },
  methods: {
    // 选题
    showPopup() {
      this.show = true
      this.dates()
    },
    singl(e) {
      this.$refs.mychild.singl(e)
      this.show = false
    },
    selec(e) {
      this.$refs.mychild.selec(e)
      this.show = false
    },
    judgs(e) {
      this.$refs.mychild.judgs(e)
      this.show = false
    },
    opers(e) {
      this.$refs.mychild.opers(e)
      this.show = false
    },
    // 判断有无值渲染选题的不同
    dates() {
      for (let it = 0; it < this.single.length; it++) {
        if (this.single_key[it] == this.single_right_key[it]) {
          let its = it + 1
          this.issicolor[its] = it + 1
        }
      }
      for (let it = 0; it < this.selection.length; it++) {
        if (this.selection_key2[it] == this.selection_right_key[it]) {
          let its = it + 1
          this.issecolor[its] = it + 1
        }
      }
      for (let it = 0; it < this.judge.length; it++) {
        if (this.judge_key[it] == this.judge_right_key[it]) {
          let its = it + 1
          this.isjucolor[its] = it + 1
        }
      }
      // for (let it = 0; it < this.operation.length; it++) {
      //   if (this.operation_key[it] == '我没做') {
      //     let its = it + 1
      //     this.isopcolor[its] = it + 1
      //   }
      // }
    },

    // 上一题
    upItem() {
      this.$refs.mychild.upItem()
    },
    // 下一题
    nexItem() {
      this.$refs.mychild.nexItem()
    },
    // 退出错题
    onClickLeft() {
      this.$router.push('/sroucxq')
    }
  },
  mounted() {
    // 获取科目
    axios({
      method: 'post',
      url: this.baseURL + '/api/api/showError',
      data: {
        id: localStorage.getItem('showSorce_id')
      }
    }).then((res) => {
      // console.log(res)4
      // console.log(typeof res.data.selection_key)
      // 题目
      this.single = res.data.single
      this.selection = res.data.selection
      this.judge = res.data.judge
      this.operation = res.data.operation
      // 提交的答案
      this.single_key = res.data.single_key
      this.selection_key = res.data.selection_key2
      this.judge_key = res.data.judge_key
      this.operation_key = res.data.operation_key
      this.selection_key2 = res.data.selection_key
      // 参考答案
      for (let i = 0; i < this.single.length; i++) {
        this.single_right_key[i] = this.single[i]['right_key']
      }
      for (let i = 0; i < this.selection.length; i++) {
        this.selection_right_key[i] = this.selection[i]['right_key']
      }
      for (let i = 0; i < this.judge.length; i++) {
        this.judge_right_key[i] = this.judge[i]['right_key']
      }
    })
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.times {
  text-align: center;
}
.upItem {
  position: fixed;
  left: 3%;
  bottom: 3%;
}
.nexItem {
  position: fixed;
  right: 3%;
  bottom: 3%;
}
.xuanti {
  position: fixed;
  right: 43%;
  bottom: 3%;
}
.xuanti1 {
  padding: 10px;
}
.xuantiP {
  font-size: 14px;
  color: #1989fa;
  border-color: #1989fa;
}
.corresize {
  font-size: 12px;
}
.blue {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 5px;
  width: 20px;
  height: 20px;
  border: 1px solid blue;
  color: blue;
  padding: 2px;
}
.ocolor {
  display: flex;
  flex-direction: row;
  margin-top: 20px;
  font-size: 12px;
}
.red {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 5px;
  width: 20px;
  height: 20px;
  border: 1px solid red;
  color: red;
  padding: 2px;
}
</style>
